CardMakePageManager=function(){
	CardMakePageManager.defValue
	//this.currentTplData=null;
	this.currentFlagClass=null;
	this.allTplMap={};
	this.allTplList=[];
	this.options={};
	this.appVM=null;
	this.editVM=null;
	this.inited=false;
	this.initEvent=false;
}

CardMakePageManager.defValue={
	tplContent:'#tpl-content',
	tplSelListContent:'#tpl-sel-list-content',
	tplContentSetting:'#tpl-content-setting',
	cardTplMenuBar:'#card-tpl-menu-bar',
	createContent:"#card-create-content",
	VMConfig:{
		el:"#card-create-content",
		data:{
			tplData:{
				img:'../images/defWriterHeader001.jpg',
				title:'李白—静夜思',
				contentText:'床前明月光，\n疑是地上霜！\n举头望明月，\n低头思故乡。\n',
				writer:'李白'
			}
		},
		methods:{
		 handleContent:function(content){
				if(content){
					var arr=[];
					content.split('\n').forEach(function(item,index){
						arr.push("<span>"+item.trim()+"</span>");
					});
					content = arr.join('<br>');
					var flagClass=CardMakePageManager.instance.currentTpl.flagClass;
					var tplTmpSetting=CardMakePageManager[flagClass];
					if(tplTmpSetting && tplTmpSetting.handleContent && CardMakePageManager[tplTmpSetting.handleContent]){
						content=CardMakePageManager[tplTmpSetting.handleContent](content);
					}
				}
				return content;
			},
		 handleTitle:function(content){
				 var flagClass=CardMakePageManager.instance.currentTpl.flagClass;
				 var tplTmpSetting=CardMakePageManager[flagClass];
				 if(tplTmpSetting && tplTmpSetting.handleTitle && CardMakePageManager[tplTmpSetting.handleTitle]){
					content=CardMakePageManager[tplTmpSetting.handleTitle](content);
				 }
				 return content;
			},
			getImage:function (url,imgId) {
				var xhr = new XMLHttpRequest();
				xhr.open('get', url, true);
				xhr.responseType = 'blob';
				xhr.onload = function () {
					if (this.status == 200) {
						document.getElementById(imgId).src =  URL.createObjectURL(this.response);
					}
				};
				xhr.send(null);
			}
		}
	},
	editVMConfig:{
		el:"#tpl-content-setting",
		data:{
			tplData:{
				img:'../images/defWriterHeader001.jpg',
				title:'静夜思',
				contentText:'床前明月光',
				writer:'李白'
			}
		},
		methods:{
			
		}
	},
	tplList:[{
		url:'cardTpl/defSimpleTpl.html',
		flagClass:'defSimpleTpl',
		thumbUrl:'../images/card_tpl_simple_def.jpg',
		name:'简约方图'
	},{
		url:'cardTpl/bgAndWhiteContentTpl.html',
		flagClass:'bgAndWhiteContentTpl',
		thumbUrl:'../images/card_tpl_bgAndWhiteContentTpl.jpg',
		name:'简约圆图'
	},{
		url:'cardTpl/defCardTpl.html',
		flagClass:'defCardTpl',
		thumbUrl:'../images/card_tpl_defCardTpl.jpg',
		name:'青色模板'
	}],
}

CardMakePageManager.prototype.init=function(opts){
	var that=this;
	if(!this.inited){
		this.options=$.extend(true,{},CardMakePageManager.defValue,opts);
		this.allTplList=this.options.tplList;
		this.initTplEditVM();
		this.tplListToMap();
		this.initDefEventListener();
		this.fillTplSelItems();
		//
		this.changeToTpl('defSimpleTpl');
	}
	this.inited=true;
	CardMakePageManager.instance=this;
}

CardMakePageManager.prototype.tplListToMap=function(){
	var that=this;
	mui.each(this.allTplList,function(index,value){
		that.allTplMap[value.flagClass]=value;
	})
}

CardMakePageManager.prototype.fillTplSelItems=function(){
	var that=this;
	var tplHtml='';
	mui.each(this.allTplList,function(index,value){
		tplHtml+='<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">'+
			'<a class="tpl-sel-item" flag-class="'+value.flagClass+'">'+
				'<img src="'+value.thumbUrl+'" />'+
				'<div class="mui-media-body">'+value.name+'</div>'+
			'</a>'+
		'</li>';
	});
	$(this.options.tplSelListContent).find('ul').empty().html(tplHtml);
}

CardMakePageManager.prototype.changeToTpl=function(flagClass){
	var that=this;
	var tpl=this.allTplMap[flagClass];
	if(!tpl){
		mui.alert('错误的模板flagClass');
		return;
	}
	this.currentTpl=tpl;
	this.currentFlagClass=flagClass;
	$(that.options.tplSelListContent).find('[flag-class]').removeClass('xq-select-grid');
	$(that.options.tplSelListContent).find('[flag-class='+this.currentFlagClass+']').addClass('xq-select-grid');
	var $tpl=$(this.options.tplContent).find('.'+flagClass);
	if($tpl.length==0){
		muiAjaxGetHtmlData({
			url:tpl.url,
			data:{},
			callback:function(data){
				$(that.options.tplContent).append(data);
				$tpl=$(that.options.tplContent).find('.'+flagClass);
				that.appendTplAndFillData($tpl.clone(true));
			}
		});
	}else{
		that.appendTplAndFillData($tpl.clone(true));
	}
}

CardMakePageManager.prototype.appendTplAndFillData=function(tplNode){
	if(this.appVM){
		this.appVM.$destroy();
	}
	$(this.options.createContent).empty().append(tplNode);
	this.appVM=new Vue(this.options.VMConfig);
}

CardMakePageManager.prototype.initTplEditVM=function(tplNode){
	this.editVM=new Vue(this.options.editVMConfig);
	this.initEditEventListener();
}

CardMakePageManager.prototype.initEditEventListener=function(){
	var that=this;
	$(this.options.tplContentSetting).on('tap','img[edit-ele]',function(e){
		$(that.options.tplContentSetting).find('[file-input]').trigger('click');
	});
	$(this.options.tplContentSetting).on('change',' [file-input]',function(e){
		if(this.files.length==0){
			return;
		}
		var file = this.files[0];
		var reader = new FileReader();
		var editVMConfigData=that.options.editVMConfig.data;
		reader.onload = function () {
			//var img = $("#card-create-content").find('img');
			//img[0].src = reader.result;
			editVMConfigData.tplData.img=reader.result;
		};
		reader.readAsDataURL(file);
		e.preventDefault();
	});
	$(this.options.tplContentSetting).on('tap','.confirm',function(e){
		that.options.VMConfig.data.tplData=$.extend(true,{},that.options.editVMConfig.data.tplData);
		that.closeEditPanel();
	});
	$(this.options.tplContentSetting).on('tap','.cancel',function(e){
		that.closeEditPanel();
	});
}

CardMakePageManager.prototype.initDefEventListener=function(){
	var that=this;
	//选择模板
	$(this.options.tplSelListContent).on('tap','[flag-class]',function(){
		var flagClass=$(this).closest('[flag-class]').attr('flag-class');
		that.changeToTpl(flagClass);
	});
	//
	$(this.options.cardTplMenuBar).on('tap','[fun-edit]',function(){
		that.closeTplSelListContent();
		that.openEditPanel();
	});
	$(this.options.cardTplMenuBar).on('tap','[fun-to-sel-tpl]',function(){
		that.toogleTplSelListContent();
	});
	$(this.options.cardTplMenuBar).on('tap','[fun-save-card]',function(){
		that.closeTplSelListContent();
		//
		commonUtils.showLoading("处理中",{maskBgColor:"transparent"});
		var ele=document.querySelector(that.options.createContent+" .actived-card");
		var bgVal=$(ele).css('background-color');
		var width=$(ele).width();
		var height=$(ele).height()
		html2canvas(ele,{ useCORS: true,backgroundColor:bgVal}).then(canvas => {
		    commonUtils.showLoading("图像生成完成",{maskBgColor:"transparent"});
			var dataURL = canvas.toDataURL();
			var formtData=dateFormat(new Date(),'YYYYmmddHHMMSSsss');
			var fileName="senCard-"+formtData;
			commonUtils.showLoading("图像转码完成",{maskBgColor:"transparent"});
			commonUtils.baseImgFile(fileName,dataURL,100);
		});
	});
}


CardMakePageManager.prototype.openEditPanel=function(){
	var that=this;
	var flagShowClass='flag-show-class';
	if($(that.options.tplContentSetting).is('.'+flagShowClass)){
		return;
	}
	that._addBgMask(9,function(){
		that.closeEditPanel();
	});
	that.options.editVMConfig.data.tplData=$.extend(true,{},that.options.VMConfig.data.tplData);
	$(that.options.tplContentSetting).addClass(flagShowClass);
	$(that.options.tplContentSetting).css('bottom','0px');
}

CardMakePageManager.prototype.closeEditPanel=function(){
	var that=this;
	var flagShowClass='flag-show-class';
	if($(that.options.tplContentSetting).is('.'+flagShowClass)){
		$(that.options.tplContentSetting).removeClass(flagShowClass);
		$(that.options.tplContentSetting).css('bottom','-530px');
		if(that.options.maskEleId){
			$('#'+that.options.maskEleId).remove();
		}
	}

}

CardMakePageManager.prototype.toogleTplSelListContent=function(){
	var that=this;
	var flagShowClass='flag-show-class';
	if($(that.options.tplSelListContent).is('.'+flagShowClass)){
		that.closeTplSelListContent();
	}else{
		that.openTplSelListContent();
	}
}

CardMakePageManager.prototype.closeTplSelListContent=function(){
	var that=this;
	var flagShowClass='flag-show-class';
	if($(that.options.tplSelListContent).is('.'+flagShowClass)){
		$(that.options.tplSelListContent).removeClass(flagShowClass);
		$(that.options.tplSelListContent).css('bottom','-450px');
		if(that.options.maskEleId){
			$('#'+that.options.maskEleId).remove();
		}
	}
}
CardMakePageManager.prototype.openTplSelListContent=function(){
	var that=this;
	var flagShowClass='flag-show-class';
	if($(that.options.tplSelListContent).is('.'+flagShowClass)){
		return;
	}
	that._addBgMask(8,function(){
		that.closeTplSelListContent();
	});
	$(that.options.tplSelListContent).addClass(flagShowClass);
	$(that.options.tplSelListContent).css('bottom','45px');
}

CardMakePageManager.prototype._addBgMask=function(zIndex,tapFunction){
	var eleId='bg-mask-'+new Date().getTime();
	this.options.maskEleId=eleId;
	var maskEle='<div class="xq-bg-mask" id="'+eleId+'"></div>';
	
	$('body').append($(maskEle));
	$('#'+eleId).css('z-index',zIndex);
	if(tapFunction){
		$('#'+eleId).off('tap').on('tap',function(e){
			tapFunction(eleId);
		});
	}
}